<template>
  <div class="produ-tags"
    @mouseenter="bIsAddBtnShow = true"
    @mouseleave="bIsAddBtnShow = false">
      <p>
        <!-- tag list -->
        <Tag
          v-for="(tagItem, tagKey) in tags"
          :key="tagKey"
          :text="tagItem"
          :canClose="isBtnShow && _isTagTypeCanClose(tagKey)"
          :color="_getTagColor(tagKey)"
          @close="onDel(tagKey)">
        </Tag>

        <!-- no tag -->
        <i v-if="!tags" class="no-tags el-icon-s-flag"></i>

        <!-- add tag btn -->
        <span v-if="bIsAddBtnShow && isBtnShow" class="produ-tags-add-area" @mouseleave="bIsTagsListLayoutShow = false">
          <i class="button-new-tag" @click="onShowTagsList">+</i>
          <div v-if="bIsTagsListLayoutShow" class="produ-tags-add-area-dialog">
            <el-card>
              <template #header>
                <span>标签列表</span>
              </template>
              <div class="produ-tags-add-area-dialog-layout">
                <el-button
                  v-for="(tagItem) in tagAddList"
                  :key="tagItem.id"
                  class="produ-tags-add-area-dialog-layout-item"
                  @click="onAdd(tagItem)"
                  size="small"
                  :type="_bIsTagExist(tagItem.id) ? 'primary' : 'default'"
                  round>
                    {{tagItem.name}}
                </el-button>
                <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
              </div>
            </el-card>
          </div>
        </span>
      </p>
  </div>
</template>

<script>
  import Tag from '@/views/child/admin/common/tag/Tag.vue';
  import { mapState, mapActions } from 'vuex';
  import { isObject } from '@/utils/public.js';
  import { Colors, Random_colors } from '@/utils/colors.js';
  import { ElMessage } from 'element-plus';

  export default {
    name: 'produTags',
    data () {
      return {
        /* tag */
        bIsAddBtnShow: false,  // 内部控制是否显示
        tags: null,
        bIsTagsListLayoutShow: false,
        tagColors: {},
      }
    },
    props: ['item', 'isBtnShow'],  // isBtnShow 外部控制是否显示
    computed: {
      ...mapState({
        tagAddList: state => state.user.tagAddList,
      }),
      _getTagColor() {
        return (tagKey) => {
          switch(tagKey) {
            case '10':  // 正式
              return Colors.blue;
            case '11':  // 复用
              return Colors.green;
            case '12':  // 模板
              return Colors.orange;
            case '14':  // 测试
              return Colors.red;
            case '15':  // 废弃
              return Colors.grey;
            case '159':  // PC
              return Colors.normal;
            case '160':  // H5
              return Colors.normal;
            case '162':  // Card
              return Colors.normal;
            default:
              if (!this.tagColors[tagKey]) this.setTagColor(tagKey);
              return this.tagColors[tagKey];
          }
        };
      },
      _isTagTypeCanClose() {
        return (tagKey) => {
          return tagKey != '160' && tagKey != '162' && tagKey != '159';
        };
      },
      _tagExistArr() {
        return this.tags && Object.keys(this.tags) || [];
      },
      _bIsTagExist() {
        return (id) => this._tagExistArr.indexOf(id) > -1;
      },
    },
    components: {
      Tag,
    },
    mounted() {
      // 1. tags
      if(this.item && isObject(this.item.tags) && this.item.tags != {}) this.tags = this.item.tags;
      else this.tags = null;
    },
    methods: {
      ...mapActions({
        addTag: 'user/addTag',
        deleteTag: 'user/deleteTag',
        getTaglist: 'user/getTaglist',
      }),

      // methods
      setTagColor(key) {
        this.tagColors[key] = Random_colors[Math.floor(Math.random() * Random_colors.length)];
      },

      // add
      onShowTagsList() {
        let that = this;
        this.bIsTagsListLayoutShow = !this.bIsTagsListLayoutShow;
        if(this.tagAddList.length <= 0) this.getTaglist();
      },
      onAdd(tagItem) {
        // 1. tag exist, show warning, and return
        if (this._bIsTagExist(tagItem.id)) {
          ElMessage({
            showClose: true,
            message: '标签已存在～',
            type: 'warning',
          });

          return;
        }

        // 2. add tag
        let that = this;
        this.addTag({
          site_id: this.item.site_id,
          tag_id: tagItem.id,
          callback: (res) => {
            if(res && res.code == 0) {
              let _tags = _.cloneDeep(that.tags);
              if(!_tags) _tags = {};
              _tags[tagItem.id] = tagItem.name;
              that.tags = _tags;
            }
            else res && this.$message(res.msg);
          }
        });
      },
      onDel(tagKey) {
        let that = this;
        this.deleteTag({
          site_id: this.item.site_id,
          tag_id: tagKey,
          callback: (res) => {
            if(res && res.code == 0) {
              let _tags = _.cloneDeep(that.tags);
              delete _tags[tagKey];
              if(JSON.stringify(_tags) == "{}") _tags = null;
              that.tags = _tags;
            }
            else res && this.$message(res.msg);
          }
        });
      },
    },
  }
</script>

<style lang="scss">
  .produ-tags {
    position: absolute;
    bottom: 2px;
    width: 100%;

    .button-new-tag {
      display: inline-block;
      text-align: center;
      font-style: normal;
      font-size: 14px;
      background: #fff;
      padding: 0 5px;
      cursor: pointer;
      border-radius: 4px;
      color: #666;
    }
    .no-tags {
      margin: 0 8px;
      font-size: 14px;
      color: #409EFF;
    }
  }

  .produ-tags-add-area {
    position: relative;
    margin: 2px;

    .produ-tags-add-area-dialog {
      position: absolute;
      left: 50%;
      top: 22px;
      transform: translate(-50%, 0%);
      padding-top: 2px;
      // background: #fff;

      .produ-tags-add-area-dialog-layout {
        width: 210px;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

        .produ-tags-add-area-dialog-layout-item {
          margin: 2px 5px;
          width: 60px;
        }

        i {
          width: 60px;
          margin: 0 5px;
        }
      }
    }
  }
</style>
